<template>
  <div class="new-tab-page large parkinglot-wrapper edit-special-form" key="editRule">
    <div class="page-main-title" v-if="parkSpecialChargeVoList">
      {{ $route.query.isAddSpecialRule ? '新增特殊收费规则' : `编辑-${parkSpecialChargeVoList.ruleList[0].chargeName}` }}
      <i
        class="return-icon"
        @click="back"
      ></i>
    </div>
    <div class="main-content">
      <div class="special-rule-form">
        <template v-if="!isAddingSpecialRule">
          <el-form
            label-width="120px"
            size="small"
            class="zb-form rule-form zb-disabled-form"
            :model="parkSpecialChargeVoList"
            ref="parkSpecialChargeVoList"
          >
            <div class="special-rule-list">
              <div
                class="special-rule-item"
                v-for="(item, index) in parkSpecialChargeVoList.ruleList"
                :key="index"
              >
                <div class="rule-content">
                  <div class="el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label="规则名称"
                      label-width="90px"
                      class="input-width-control"
                      :prop="'ruleList.' + index + '.chargeName'"
                      :rules="[{ required: true, message: '请输入规则名称', trigger: 'blur' }]"
                    >
                      <el-input v-model="item.chargeName" :disabled="!item.isEdit"></el-input>
                    </el-form-item>
                    <el-form-item label label-width="0" style="margin-left: 15px">
                      <el-checkbox v-model="item.enableFlag" :disabled="!item.isEdit">启用规则</el-checkbox>
                    </el-form-item>
                  </div>

                  <div class="el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label="规则内容"
                      label-width="90px"
                      class="input-width-control"
                      :prop="'ruleList.' + index + '.chargeType'"
                      :rules="[{ required: true, message: '请选择规则内容', trigger: 'blur' }]"
                    >
                      <el-select
                        v-model="item.chargeType"
                        placeholder="请选择"
                        :disabled="!item.isEdit"
                      >
                        <el-option
                          v-for="item in opts.specialType"
                          :key="item.value"
                          :label="item.type"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>

                  <div
                    class="el-form--inline zb-inline-form rule-inline-form"
                    v-if="item.chargeType === 1"
                  >
                    <el-form-item label="24小时制" label-width="90px" class="input-width-control">
                      <el-radio-group
                        :disabled="!item.isEdit"
                        v-model="item.parkSpecialChargeAllDayTopVo.institutionType"
                      >
                        <el-radio
                          :label="item.value"
                          v-for="item in opts.institutionType"
                        >{{ item.type }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>

                  <div
                    class="el-form--inline zb-inline-form rule-inline-form"
                    v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType===0"
                  >
                    <el-form-item
                      label="封顶金额"
                      label-width="90px"
                      class="input-width-control hasUnit"
                      :prop="'ruleList.' + index + '.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue'"
                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                    >
                      <el-input
                        type="number"
                        v-model.number="item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue"
                        :disabled="!item.isEdit"
                      ></el-input>
                      <span class="unit">元</span>
                    </el-form-item>
                  </div>

                  <!-- 自然日-(起始时刻 and 封顶金额-) -->
                  <div
                    class="el-form--inline zb-inline-form rule-inline-form"
                    v-else-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                  >
                    <!-- 起始时刻 -->
                    <el-form-item
                      label="起始时刻"
                      label-width="90px"
                      class="input-width-control"
                      :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime'"
                    >
                      <el-time-picker
                        placeholder="选择时间"
                        v-model="item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        :disabled="!item.isEdit"
                        @change="naturalDayStartTimeForSingle(item)"
                      ></el-time-picker>
                    </el-form-item>
                    <!-- 封顶金额 -->
                    <el-form-item
                      label="封顶金额"
                      label-width="90px"
                      class="input-width-control fd hasUnit"
                      :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue'"
                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                    >
                      <el-input
                        type="number"
                        v-model.number="item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue"
                        :disabled="!item.isEdit"
                      ></el-input>
                      <span class="unit">元</span>
                    </el-form-item>

                    <div
                      class="naturalDay-addBtn-box"
                      @click="addNaturalDayTopItemForSingle(parkSpecialChargeVoList.ruleList, index, item)"
                    >
                      <img src="../../../../../assets/img/ic_subscribe_add@2x.svg" alt />
                      <span>添加子封顶</span>
                    </div>
                  </div>

                  <div
                    class="naturalDay-sub-list"
                    v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                  >
                    <div
                      class="sub-item"
                      v-for="(sitem,sindex) in item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList"
                    >
                      <div class="item-text">子封顶 {{sindex+1}}</div>
                      <div class="time-slot el-form--inline zb-inline-form rule-inline-form">
                        <el-form-item
                          label-width="90px"
                          class="input-width-control"
                          :prop="'ruleList.' + index + '.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+sindex+'.startTime'"
                        >
                          <el-time-picker
                            placeholder="00:00"
                            v-model="sitem.startTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            :disabled="sindex==0 || !item.isEdit"
                          ></el-time-picker>
                        </el-form-item>
                        <span class="symbol">~</span>
                        <el-form-item
                          label-width="90px"
                          class="input-width-control"
                          :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+sindex+'.endTime'"
                        >
                          <el-time-picker
                            placeholder="00:00"
                            v-model="sitem.endTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            :disabled="sindex==item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.length-1 || !item.isEdit"
                          ></el-time-picker>
                        </el-form-item>
                      </div>
                      <div class="money-box">
                        <el-form-item
                          label="封顶金额"
                          label-width="100px"
                          class="input-width-control fd hasUnit"
                          :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+sindex+'.maxValue'"
                          :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                        >
                          <el-input
                            type="number"
                            v-model.number="sitem.maxValue"
                            :disabled="!item.isEdit"
                          ></el-input>
                          <span class="unit">元</span>
                        </el-form-item>

                        <div
                          v-if="sindex!=0"
                          class="del-icon"
                          @click="deleteSubTopItemForSingle(parkSpecialChargeVoList.ruleList, index, item, sindex)"
                        >
                          <i class="el-icon-close"></i>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div
                    class="el-form--inline zb-inline-form rule-inline-form"
                    v-if="item.chargeType === 5"
                  >
                    <el-form-item
                      label="免费时长"
                      label-width="90px"
                      class="input-width-control hasUnit"
                      :prop="'ruleList.' + index + '.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue'"
                      :rules="[{ required: true, message: '请输入免费时长', trigger: 'blur' }]"
                    >
                      <el-input
                        type="number"
                        v-model.number="item.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue"
                        :disabled="!item.isEdit"
                        min="0"
                      ></el-input>
                      <span class="unit">分</span>
                    </el-form-item>
                  </div>

                  <div class="el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label="使用条件"
                      label-width="90px"
                      class="input-width-control"
                      :prop="'ruleList.' + index + '.parkSpecialChargeServiceConditionVo.serviceConditionType'"
                    >
                      <el-select
                        placeholder="请选择"
                        v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionType"
                        @change="listItemServiceConditionTypeChange($event, item)"
                        :disabled="!item.isEdit"
                      >
                        <el-option
                          v-for="item in opts.serviceConditionType_edit"
                          :key="item.value"
                          :label="item.type"
                          :value="item.value"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>

                      <template
                        v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType === 1"
                      >
                        <span class="unit" style="margin: 0 2px">包含</span>
                        <el-form-item
                          label
                          label-width="0"
                          class="input-width-control plate-input-item"
                          :prop="'ruleList.' + index + '.parkSpecialChargeServiceConditionVo.serviceConditionValue'"
                          :rules="[{ required: true, message: '请输入车牌号码', trigger: 'blur' }]"
                        >
                          <el-input
                            :disabled="!item.isEdit"
                            v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                            placeholder="请输入车牌号码(模糊)"
                          ></el-input>
                        </el-form-item>
                      </template>

                      <template
                        v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType == 2"
                      >
                        <span class="unit_">=</span>
                        <el-select
                          v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                          placeholder="请选择"
                          multiple
                          :disabled="!item.isEdit"
                        >
                          <el-option
                            v-for="item in specialRuleVipTypes"
                            :key="item.id"
                            :label="item.customVipName"
                            :value="`${item.id}`"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-form-item>
                  </div>

                  <el-form-item
                    label
                    label-width="82px"
                    v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType == 3"
                    :prop="'ruleList.' + index + '.parkSpecialChargeServiceConditionVo.serviceConditionValue'"
                    :rules="[{ type: 'array', required: true, message: '请至少选择一种车辆类型', trigger: 'change' }]"
                  >
                    <el-checkbox-group
                      :disabled="!item.isEdit"
                      v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                    >
                      <el-checkbox
                        :label="item.value"
                        :key="item.value"
                        v-for="item in opts.carTypes_special"
                      >{{ item.type }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>

                  <el-form-item
                    size="medium"
                    class="action-box"
                    label-width="0px"
                    v-if="item.isEdit"
                  >
                    <!-- <el-button type="primary" plain @click="cancelEditSpRule(parkSpecialChargeVoList.ruleList, index, item)">取消</el-button> -->
                    <el-button
                      type="primary"
                      @click="SaveEditSpItem(parkSpecialChargeVoList.ruleList, index, item)"
                    >保存</el-button>
                    <el-button plain @click="back" style="margin-left: 40px">取消</el-button>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </template>

        <template v-if="isAddingSpecialRule">
          <el-form
            :model="specialRuleItemInitData"
            ref="specialRuleItemInitData"
            label-width="120px"
            size="small"
            class="zb-form rule-form add-special-rule-content"
            label-position="left"
          >
            <div class="rule-content">
              <div class="el-form--inline zb-inline-form rule-inline-form">
                <el-form-item
                  label="规则名称"
                  label-width="90px"
                  class="input-width-control"
                  prop="chargeName"
                  :rules="[{ required: true, message: '请输入规则名称', trigger: 'blur' }]"
                >
                  <el-input v-model="specialRuleItemInitData.chargeName"></el-input>
                </el-form-item>
                <el-form-item label label-width="0" style="margin-left: 15px">
                  <el-checkbox v-model="specialRuleItemInitData.enableFlag">启用规则</el-checkbox>
                </el-form-item>
              </div>

              <div class="el-form--inline zb-inline-form rule-inline-form">
                <el-form-item
                  label="规则内容"
                  label-width="90px"
                  class="input-width-control"
                  prop="chargeType"
                  :rules="[{ required: true, message: '请选择规则内容', trigger: 'blur' }]"
                >
                  <el-select v-model="specialRuleItemInitData.chargeType" placeholder="请选择">
                    <el-option
                      v-for="item in opts.specialType"
                      :key="item.value"
                      :label="item.type"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="specialRuleItemInitData.chargeType === 1"
              >
                <el-form-item label="24小时制" label-width="90px" class="input-width-control">
                  <el-radio-group
                    v-model="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType"
                  >
                    <el-radio
                      :label="item.value"
                      v-for="item in opts.institutionType"
                    >{{ item.type }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="specialRuleItemInitData.chargeType === 1 && specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType==0"
              >
                <el-form-item
                  label="封顶金额"
                  label-width="90px"
                  class="input-width-control hasUnit"
                  prop="parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue"
                  :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                >
                  <el-input
                    type="number"
                    v-model.number="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue"
                  ></el-input>
                  <span class="unit">元</span>
                </el-form-item>
              </div>

              <!-- 自然日-(起始时刻 and 封顶金额-) -->
              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-else-if="specialRuleItemInitData.chargeType === 1 && specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType==1"
              >
                <!-- 起始时刻 -->
                <el-form-item
                  label="起始时刻"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime"
                >
                  <el-time-picker
                    @change="naturalDayStartTime"
                    placeholder="选择时间"
                    v-model="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime"
                    format="HH:mm"
                    value-format="HH:mm"
                  ></el-time-picker>
                </el-form-item>
                <!-- 封顶金额 -->
                <el-form-item
                  label="封顶金额"
                  label-width="90px"
                  class="input-width-control fd hasUnit"
                  prop="parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue"
                  :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                >
                  <el-input
                    type="number"
                    v-model.number="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue"
                  ></el-input>
                  <span class="unit">元</span>
                </el-form-item>

                <div class="naturalDay-addBtn-box" @click="addNaturalDayTopItem()">
                  <img src="../../../../../assets/img/ic_subscribe_add@2x.svg" alt />
                  <span>添加子封顶</span>
                </div>
              </div>

              <div
                class="naturalDay-sub-list"
                v-if="specialRuleItemInitData.chargeType === 1 && specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType==1 && isFirstTimeToAdd"
              >
                <div
                  class="sub-item"
                  v-for="(item,index) in specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList"
                >
                  <div class="item-text">子封顶 {{index+1}}</div>
                  <div class="time-slot el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label-width="90px"
                      class="input-width-control"
                      :prop="'parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+index+'.startTime'"
                    >
                      <el-time-picker
                        placeholder="00:00"
                        v-model="item.startTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        :disabled="index===0"
                      ></el-time-picker>
                    </el-form-item>
                    <span class="symbol">~</span>
                    <el-form-item
                      label-width="90px"
                      class="input-width-control"
                      :prop="'parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+index+'.endTime'"
                    >
                      <el-time-picker
                        placeholder="00:00"
                        v-model="item.endTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        :disabled="index===(specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.length-1)"
                      ></el-time-picker>
                    </el-form-item>
                  </div>
                  <div class="money-box">
                    <el-form-item
                      label="封顶金额"
                      label-width="100px"
                      class="input-width-control fd hasUnit"
                      :prop="'parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+index+'.maxValue'"
                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                    >
                      <el-input type="number" v-model.number="item.maxValue"></el-input>
                      <span class="unit">元</span>
                    </el-form-item>
                  </div>
                  <div class="del-icon" @click="deleteSubTopItem(item,index)">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="specialRuleItemInitData.chargeType === 5"
              >
                <el-form-item
                  label="免费时长"
                  label-width="90px"
                  class="input-width-control hasUnit"
                  prop="parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue"
                  :rules="[{ required: true, message: '请输入免费时长', trigger: 'blur' }]"
                >
                  <el-input
                    type="number"
                    v-model.number="specialRuleItemInitData.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue"
                    min="0"
                  ></el-input>
                  <span class="unit">分</span>
                </el-form-item>
              </div>

              <div class="el-form--inline zb-inline-form rule-inline-form">
                <el-form-item
                  label="使用条件"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeServiceConditionVo.serviceConditionType"
                  :rules="[{ required: true, message: '请选择使用条件', trigger: 'change' }]"
                >
                  <el-select
                    placeholder="请选择"
                    v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType"
                    @change="serviceConditionTypeChange"
                  >
                    <el-option
                      v-for="item in opts.serviceConditionType_edit"
                      :key="item.value"
                      :label="item.type"
                      :value="item.value"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>

                  <template
                    v-if="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType === 1"
                  >
                    <span class="unit" style="margin: 0 2px">包含</span>
                    <el-form-item
                      label
                      label-width="0"
                      class="input-width-control plate-input-item"
                      prop="parkSpecialChargeServiceConditionVo.serviceConditionValue"
                      :rules="[{ required: true, message: '请输入车牌号码', trigger: 'blur' }]"
                    >
                      <el-input
                        v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                        placeholder="请输入车牌号码(模糊)"
                      ></el-input>
                    </el-form-item>
                  </template>

                  <template
                    v-if="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType == 2"
                  >
                    <span class="unit_">=</span>
                    <el-select
                      v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                      placeholder="请选择"
                      multiple
                    >
                      <el-option
                        v-for="item in specialRuleVipTypes"
                        :key="item.id"
                        :label="item.customVipName"
                        :value="`${item.id}`"
                      ></el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </div>

              <el-form-item
                label
                label-width="82px"
                v-if="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType == 3"
                prop="parkSpecialChargeServiceConditionVo.serviceConditionValue"
                :rules="[{ type: 'array', required: true, message: '请至少选择一种车辆类型', trigger: 'change' }]"
              >
                <el-checkbox-group
                  v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                >
                  <el-checkbox
                    :label="item.value"
                    :key="item.value"
                    v-for="item in opts.carTypes_special"
                  >{{ item.type }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </div>

      <el-form
        label-width="120px"
        size="small"
        class="zb-form rule-form"
        v-if="isAddingSpecialRule "
      >
        <el-form-item size="medium" class="action-box" label-width="0px">
          <el-button type="primary" @click="addSpecialRuleToList">确定</el-button>
          <el-button plain @click="back" style="margin-left: 40px">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import pageScript from "./EditSpecialRule.js";
export default pageScript;
</script>

<style lang="less" scoped>
@import "../../../../../assets/less/base/variables.less";
@import "../../../../../assets/less/base/newTabPageCommom.less";

.el-upload__tip {
  display: flex;
  flex-direction: column;
}

.main-content {
  margin: 0 20px;
  margin-top: 20px;
}

.tab {
  margin-top: 20px;
}

.naturalDay-addBtn-box {
  margin-left: 15px;
  color: @blue;
  cursor: pointer;
  img {
    vertical-align: sub;
    margin-right: 5px;
  }
}

.naturalDay-sub-list {
  margin-bottom: 8px;

  .sub-item {
    background: #f4f4f4;
    border-radius: 4px;
    padding: 10px 20px;
    display: flex;
    position: relative;
    margin-bottom: 15px;

    > div {
      &:first-child {
        padding-top: 6px;
        margin-right: 10px;
      }

      &.time-slot {
        margin-bottom: 0px;

        .symbol {
          margin-right: 10px;
        }
      }
    }

    .money-box {
      display: flex;

      .el-form-item {
        margin-bottom: 0px;
      }
    }

    .del-icon {
      top: 18px;
      align-items: unset;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../AddParkingLot/AddParkingLotComponents/FormContent.less";
.zb-form {
  width: 480px;
}
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
.edit-special-form {
  .el-form-item {
    .unit {
      margin: 0 8px !important;
    }
    .el-select {
      width: 200px !important;
    }
    .el-input {
      width: 200px;
    }
    .el-date-editor.el-input {
      width: 120px;
    }
    &.fd {
      .el-input {
        width: 120px;
      }
    }
  }
}
</style>

<style lang="less" scoped>
@import "./EditSpecialRule.less";
</style>
